<template>
  <div class="box">
    <header>
      <span class="backIcon">
        <el-page-header></el-page-header>
      </span>
      <div><strong>自主报到</strong></div>
    </header>
    <main>
      <div>
        <div class="steps" style="text-align: left">
          <el-row>
            <el-col :span="24">
              <el-steps :active="1" align-center finish-status="success">
                <el-step title="个人信息"></el-step>
                <el-step title="抵校登记"></el-step>
                <el-step title="报到单"></el-step>
              </el-steps>
            </el-col>
          </el-row>
        </div>
      </div>

      <div class="hr"></div>

      <form class="form">
        <p>
          <label for="modeOfTraffic">交通方式</label><span class="line"></span>
          <input class="name-css" type="text" id="modeOfTraffic" placeholder="请选择您到达学校的交通方式">
        </p>
        <div class="hr"></div>
        <p>
          <label for="location">接站站点</label><span class="line"></span>
          <input class="name-css" type="text" id="location" placeholder="请选择您目的地的站点位置">
        </p>
        <div class="hr"></div>
        <p>
          <label for="departureTime">出发时间</label><span class="line"></span>
          <input class="name-css" type="datetime-local" v-model="infoForm.departureTime" id="departureTime" placeholder="请填写您的出发时间">
        </p>
        <div class="hr"></div>
        <p>
          <label for="arrivalTime">到达时间</label><span class="line"></span>
          <input class="name-css" type="datetime-local" id="arrivalTime" placeholder="请填写您的到达时间">
        </p>
        <div class="hr"></div>
        <p>
          <label for="escorts">是否陪同</label><span class="line"></span>
          <input class="name-css" type="text" id="escorts" placeholder="是否有人陪同">
        </p>
        <div class="hr"></div>
        <p>
          <label for="escortsNumber">陪同人数</label><span class="line"></span>
          <input class="name-css" type="number" id="escortsNumber" placeholder="请填写您的陪同人数">
        </p>
        <div class="hr"></div>
      </form>

      <div>
        <el-button type="primary" style="width: 40%;margin-top: 2rem" @click="prevStep">下一步</el-button>
        <el-button type="primary" style="width: 40%;margin-top: 2rem" @click="nextStep">下一步</el-button>
      </div>

    </main>
  </div>
</template>

<script>
export default {
  name: "ArrivalRegistration",
  data() {
    return {
      infoForm:{
        departureTime: ''
      }
    }
  },
  methods: {
    async prevStep() {
      // 提示消息
      const re = await this.$confirm('返回上一步所填信息将重置，是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }).catch(err => err)

      // console.log(re)
      if (re != 'confirm') return this.$message.info('已取消')

      this.$router.push('/informationFilling')
    },
    async nextStep() {

      this.$router.push('/registerInfo')
    }
  }
}
</script>

<style lang="less" scoped>
.box {
  width: 100%;
  background: #fff;
  padding-bottom: 5rem;
}

header {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 2.6rem;
  background: #45C0F8;
  color: #fff;
}
header .backIcon {
  position: absolute;
  width: 6rem;
  left: 0;
}

.hr {
  margin-top: .3rem;
  margin-bottom: .6rem;
  width: 100%;
  border-bottom: 1px solid #bfcbd9;
}
main {
  width: 100%;
}
main .steps {
  width: 100%;
  margin-top: 1rem;
  /*margin-bottom: 1rem;*/
}
.form {
  width: 100%;
  text-align: left;

.name-css {
  border: 0;
  outline: none;
  width: 60%;
}


.line {
  margin: 3px 1rem 3px 1rem;
  height: 1rem;
  border-left: 1px solid #888888;
}

p {
  margin: 16px 0 16px 0;
  padding-left: 1.5rem;
}

label {
  display: inline-block;
  width: 4rem;
  text-align: right;
}

}

</style>
